import { useState, useEffect, useRef } from 'react'
import { Card, List, Space, Form, Input, NavBar } from 'antd-mobile'
import './style/home.scss'
import { ListItem } from 'antd-mobile/es/components/list/list-item'

const threeNums = [
    {
        text: '自然底数 e ≈ 2.718',
        url: 'https://h5.qzone.qq.com/ugc/share/?sharetag=A8ED81AD7C9E32D79CB77B0F6B2BF051&subtype=&ciphertext=&sid=&blog_photo=&g=85&res_uin=1776434409&cellid=1699253201&subid=&bp1=&bp2=&bp7=&appid=2#wechat_qqauth&wechat_redirect'
    }, {
        text: '黄金分割率 φ ≈ 0.618',
        url: 'https://h5.qzone.qq.com/ugc/share/?sharetag=199BDF37008581EEF3715D0E9231A6E6&subtype=&ciphertext=&blog_photo=&g=85&res_uin=1776434409&cellid=1700710030&subid=&bp1=&bp2=&bp7=&appid=2#wechat_qqauth&wechat_redirect'
    }, {
        text: '圆周率 π ≈ 3.14',
        url: 'https://h5.qzone.qq.com/ugc/share/?sharetag=D88C5451B4F8DCBFE1B1F916EC86EFE5&subtype=&ciphertext=&blog_photo=&g=85&res_uin=1776434409&cellid=1699294604&subid=&bp1=&bp2=&bp7=&appid=2#wechat_qqauth&wechat_redirect'
    },
]
// 经方换算
// https://h5.qzone.qq.com/ugc/share/?sharetag=4146ECB30BC0819A3236AAE4C30F62F9&subtype=&ciphertext=&sid=&blog_photo=&g=85&res_uin=1776434409&cellid=1697132829&subid=&bp1=&bp2=&bp7=&appid=2#wechat_qqauth&wechat_redirect

const gPerLiang = 15.625
export default () => {

    const [huangJinVal, setHuangJinVal] = useState('')
    const [val, setVal] = useState(0)
    const [currVal, setCurrVal] = useState(0)
    const [currIdx, setCurrIdx] = useState(0)
    const arr = [
        { unit: '克', ratio: 1 },
        { unit: '珠', ratio: gPerLiang / 24 },
        { unit: '两(汉)', ratio: gPerLiang },
        { unit: '斤(汉)', ratio: gPerLiang * 16 },
        { unit: '市两', ratio: 50 },
        { unit: '市斤', ratio: 500 },
        { unit: '公斤/千克', ratio: 1000 },
        { unit: '钧', ratio: gPerLiang * 16 * 30 },
        { unit: '石', ratio: gPerLiang * 16 * 30 * 4 },
    ]

    useEffect(() => {
        // alert(window.wx)
    }, [])

    return <div className='p-home'>

        <NavBar>中医工具箱</NavBar>
        <Space />
        <div className='content'>
            <Card title='中医数学化三大工具' className='threeNum'>
                <List >
                    {
                        threeNums.map(item => <List.Item onClick={() => location.href = item.url}>{item.text}</List.Item>)
                    }
                </List>
            </Card>
            <Space />
            <Card title='黄金分割率计算器' className='huangJinFenGe'>
                <Form layout='horizontal'>
                    <Form.Item label='输入：n = '>
                        <Input onChange={(v) => setHuangJinVal(v)} value={huangJinVal} type='number' clearable />
                    </Form.Item>
                    <List.Item>
                        输出：
                        n x φ = <strong>{(huangJinVal * 0.618).toFixed(2)}</strong>；
                        n x (1-φ) = <strong>{(huangJinVal * (1 - 0.618)).toFixed(2)}</strong>
                    </List.Item>
                </Form>
            </Card>
            <Space />
            <Card title='经方单位换算器' className='jingFangDanWei'>
                <Form
                    layout='horizontal'
                >
                    {
                        arr.map((item, idx) => <Form.Item label={item.unit}>
                            <Input clearable onChange={(v) => {
                                setVal(v * item.ratio)
                                setCurrIdx(idx)
                                setCurrVal(v)
                            }}
                                value={idx === currIdx ? currVal : (val / item.ratio).toFixed(3)}
                                type='number' />
                        </Form.Item>)
                    }

                </Form>
                <div className={'adm-card-footer'} onClick={e => e.stopPropagation()}>
                    <h4>计算规则</h4>
                    <ol>
                        <li>汉制24铢为两，16两为斤，30斤为钧，4钧为石。</li>
                        <li>1000克=1千克/公斤=2市斤=20市两</li>
                        <li>计算结果四舍五入到3位小数</li>

                        {/* <List.Item>
                        <div>汉制24铢为两，16两为斤，30斤为钧，4钧为石。1000克=1千克/公斤=2市斤=20市两</div>
                    </List.Item> */}
                    </ol>
                </div>
            </Card>
        </div>
    </div>
}